<script>
  import {dataList} from './app.component.ts'
</script>

<nz-layout>
  <nz-sider [class]="isCollapsed ? 'menu1' : 'menu'" *ngIf="isLogin">
    <ul nz-menu nzMode="inline" nzTheme="dark" [nzInlineCollapsed]="isCollapsed" [nzSelectable]> 
      <div class="logo">
        <!-- <img
          width="40"
          alt="Angular Logo"
          src=""
        /> -->
        <span *ngIf="!isCollapsed" class="welcome">Welcome</span>
      </div>
      <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
      <ng-template #menuTpl let-menus>
        <ng-container *ngFor="let menu of menus">
          <li
            *ngIf="!menu.children"
            nz-menu-item
            [nzPaddingLeft]="menu.level * 24"
            [nzMatchRouter]="true"
            (click)="openHandler(menu)"
            [ngClass]="{'active': menu.selected}"
          > 
            <a [routerLink]="menu.to" class="router-link">
              <i nz-icon [nzType]="menu.icon" [nzTheme]="'outline'" *ngIf="menu.icon"></i>
              <span>{{ menu.title }}</span>
            </a>
          </li>
          <li
            *ngIf="menu.children"
            nz-submenu
            [nzPaddingLeft]="menu.level * 24"
            [nzOpen]="menu.open"
            [nzTitle]="menu.title"
            [nzIcon]="menu.icon"
            [nzDisabled]="menu.disabled"
            (nzOpenChange)="collapsedHandler(menu)"
          >
            <ul>
              <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
            </ul>
          </li>
        </ng-container>
      </ng-template>
      
    </ul>
  </nz-sider>
  <div [class]="isCollapsed ? 'sider' : 'sider1'">
    <div class="menu-collapsed">
      <div (click)="toggleCollapsed()">
        <i nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" class="menu-unfold"></i>
      </div>
    </div>
  </div>
  <nz-layout>
    <nz-header *ngIf="isLogin">
      <div class="mr-12 toolbar" role="banner">
        <div class="spacer"></div>
        <!-- <a (click)="outLogin()">退出</a> -->
        <a nz-dropdown [nzDropdownMenu]="menu" class="flex items-center justify-center h-screen bg-gray-200 mr-7">
          罗不贰
          <span nz-icon nzType="down"></span>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu nzSelectable>
            <li nz-menu-item>退出登录</li>
            <li nz-menu-item>个人中心</li>
          </ul>
        </nz-dropdown-menu>
        <!-- <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
          <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
            <rect width="400" height="400" fill="none"/>
            <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
          </svg>
        </a>
        <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
          <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
            <path d="M0 0h24v24H0V0z" fill="none"/>
            <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
          </svg>
        </a> -->
      </div>
    </nz-header>
    <nz-content>
      <div class="content-warpper">
        <div class="main">
          <router-outlet></router-outlet>
        </div>
      </div>
    </nz-content>
    <nz-footer>Footer</nz-footer>
  </nz-layout>
</nz-layout>